<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<meta charset="UTF-8">
   <title>拉勾网-最专业的互联网招聘平台</title>
   <link href="style/images/favicon.ico" rel="Shortcut Icon"> <!--标签图标-->
   <link href="style/css/style.css" type="text/css" rel="stylesheet">
   <link href="style/css/external.min.css" type="text/css" rel="stylesheet">
   <link href="style/css/popup.css" type="text/css" rel="stylesheet">
   <link rel="stylesheet" href="style/css/cui.css">
         
   <script type="text/javascript" src="style/js/jquery.1.10.1.min.js"></script>
   <script src="style/js/jquery.lib.min.js" type="text/javascript"></script>
<!-- 用于富文本编辑器2 -->
   <script type="text/javascript" src="style/js/wangEditor.min.js"></script>
<!-- JS代码-------------- -->
<script type="text/javascript">
    function tijiao() {
	         var neirong=editor.txt.html();
	         nbody.value=neirong;
     }
    //===已下为三级联动===========================	
	var str="";
 	var citys=new Array();
 	citys["技术"]=["后端开发","移动开发","前端开发"];
 	citys["产品"]=["产品经理","产品设计师","高端职位"];
 	citys["设计"]=["UI设计师","交互设计","网页设计"];
 		
    var countys=new Array();           
    countys["后端开发"]=["JAVA","C++","PHP"];
 	countys["移动开发"]=["HTML5","IOS","WP"];
 	countys["前端开发"]=["web前端","Flash","JavaScript"];
 	
 	countys["产品经理"]=["网页产品经理","移动产品经理","数据产品经理"];
 	countys["产品设计师"]=["网页产品设计师","无线产品设计师"];
 	countys["高端职位"]=["产品部经理","产品总监","游戏制作人"];
 	
 	countys["UI设计师"]=["视觉设计师","网页设计师","APP设计师"];
 	countys["交互设计"]=["交互设计师","无线交互设计师","网页交互设计师"];
 	countys["网页设计"]=["数据分析师","用户研究员","设计总监"];
 	var myprovince=null;
 	var mycity=null;
 	var mycounty=null;
    
 	function init(){   /* 这个函数是为了初始化"职位类型"的内容  */   
 		myprovince=document.getElementById("myprovince");
 		mycity=document.getElementById("mycity");
 		mycounty=document.getElementById("mycounty");
 		/* ========================================	 */
 		for(var i in citys){//将省份放在第一级
 			myprovince.add(new Option(i,i));					
 		}
 		/* ======================================== */	
 		myprovince.onchange=function(){//onchange会在内容变化时触发事件
 			 mycity.length=1;//清空。这个1为“请选择”的位置
 			 if(this.value==""){return;}
 			 for(var i in citys[this.value]){//以省份为for循环的i
 			    var str=citys[this.value][i];	
 			    mycity.add(new Option(str,str));//将城市放到第二级
 			 } 
 		}
 		/*======================================== */	
 		mycity.onchange=function(){
 			    mycounty.length=1;//清空。这个1为“请选择”的位置
 			    if(this.value==""){return;}
 			    for(var i in countys[this.value]){//以城市为for循环的i
 			       var str=countys[this.value][i];	
 			       mycounty.add(new Option(str,str));//将县城放到第三级
 			    }	 
 		}	
 	}/* init()的结束 */
 	function lk(){//将三级联动的结果显示在界面	
 		document.getElementById("mydiv1").innerHTML=document.getElementById("myprovince").value+"-"+document.getElementById("mycity").value+"-"+document.getElementById("mycounty").value;
 	}
 	window.onload = init;
</script>
<!-- CSS样式-------------- -->
<style type="text/css">
	.nice-select{
	       width: 378px;
	       height: 45px;
	       border: 2px solid #F1F1F1;
	       position: relative;
	       background: #fff url(style/images/lk1.png) no-repeat right center;
    }
	.nice-select input{display: block;width: 100%;height: 38px;line-height: 38px \9;border: 0;outline: 0;background: none;}
	.nice-select ul{
	       width: 336px;
	       display: none;
	       position: absolute;
	       margin-top:0;
	       left: 0px;
	       top: 45px;
	       overflow: hidden;
	       background-color: #fff;
	       max-height: 150px;
	       overflow-y: auto;
	       border: 1px solid #999;
	       border-top: 0;
	       padding-top:0;
	       box-shadow: 0 3px 5px #999;
	       z-index: 9999;
     }
	 .nice-select ul li{height: 45px;line-height: 45px;overflow: hidden; cursor: pointer;}
	 .nice-select ul li.on{background-color: #e0e0e0;}
     .radio-2 label {
           display: inline-block;
           width: 28px;
           height: 28px;
           overflow: hidden;
           border: 1px solid #eeeeee;
           border-radius: 100%;
           margin-right: 10px;
           background-color: #ffffff;
           position: relative;
           cursor: pointer;
      }
      .radio-2 label:after {
           content: "";
           position: absolute;
           top: 4px;
           left: 4px;
           width: 20px;
           height: 20px;
           background-color: #666666;
           border-radius: 50%;
           transform: rotate(-180deg);
           transform-origin: -2px 50%;
           transition: transform .2s ease-in;
       }
       .radio-2 [type="radio"] {
           display: none;
       }
       .radio-2 [type="radio"]:checked + label:after{
           transform: rotate(0deg);
           transition: transform .2s ease-out;
       }
</style>   
<!--=HTML开始========================================= -->    
   <!--开始右边栏-->
    <div class="content" ">
        <dl class="company_center_content">
            <dt><h1><em></em>发布新职位</h1></dt>                                             		
            <dd>
            	<div class="ccc_tr">爱拼才会赢！敢唱才会红！</div>
                <form action="DonewjobServlet" method="get" id="jobForm">            
<!--=第一组输入开始================================================ --> 
                    <table class="btm">
                        <tbody>
                        	<tr>
                                <td width="25"><span class="redstar">*</span></td>
                                <td width="85">职位类别</td>
                                <td>
                                                                 一级类型:
	                                  <select id="myprovince">
	  	                                  <option value="">请选择</option>
	                                  </select>
	                                  
	                                                          二级类型:
	                                  <select id="mycity">
	  	                                  <option value="">请选择</option>
	                                  </select>
	                                    
                                                                 三级类型:
	                                  <select id="mycounty" name="pclass">
	                      	               <option value="" >请选择</option>
	                                  </select>
	                                  <input type="button" value="确定" onclick="lk()" style="width: 50px;align-content: center; border-color: #FFFFFF" />
	                                 
	                                  <c:if test="${po.getPclass() != null }">
                                                 <div id="mydiv1">${po.getPclass()}</div>
                                      </c:if>
                                      <c:if test="${po.getPclass() == null }">
                                                 <div id="mydiv1">点击“确定”显示结果</div>
                                      </c:if>
	                                  	    
                                </td>
                            </tr>
                            <tr>
                                <td><span class="redstar">*</span></td>
                                <td>职位名称</td>
                                <td>
                                    <input type="text" placeholder="请输入职位名称，如：产品经理" value="${po.getPname()}" name="pname" id="positionName" style="margin-top: 8px;">
                                 </td>
                            </tr>
                            <tr>
                               <td></td>
                               <td>所属部门</td>
                               <td>
                                <input type="text" placeholder="请输入所属部门" value="${po.getPdep()}" name="pdep" id="department" style="margin-top: 8px;">	
                               </td>
                            </tr>
                        </tbody>
                    </table><!-- 第一组输入结束 -->
<!--=第二组输入开始================================================ -->                           
                   <table class="btm">
			            <tbody>
				               <tr>
					               <td width="25"><span class="redstar">*</span></td>
					               <td width="85">工作性质</td>
					               <td>
						               <div class="radio-2" >
	                                                                      全职<input type="radio" name="radio-2" id="radio-2-1" checked="checked" value="全职">
                                           <label for="radio-2-1"></label>

                                                                              兼职<input type="radio" name="radio-2" id="radio-2-2" value="兼职">
                                           <label for="radio-2-2"></label>

                                                                               实习<input type="radio" name="radio-2" id="radio-2-3" value="实习">
                                            <label for="radio-2-3"></label>
                                            <c:if test="${po.getPnature() != null }">
                                                 <span>当前职位性质为：${po.getPnature()}</span>
                                            </c:if>
                                       </div>
					                </td>
				               </tr>
				               <tr>
					           <td><span class="redstar">*</span></td>
					           <td>月薪范围</td>
					           <!--<h3><span>(最高月薪不能大于最低月薪的2倍)</span></h3> -->
					           <td>
						       <div class="salary_range">
						        <c:if test="${po.getMonthlyMin() != null  && po.getMonthlyMax() != null}">
                                   <div>
								       <input type="text" placeholder="最低月薪" value="${po.getMonthlyMin()}" id="salaryMin" name="monthlyMin">
								       <span>k</span>
							       </div>
							       <div>
								       <input type="text" placeholder="最高月薪" value="${po.getMonthlyMax()}" id="salaryMax" name="monthlyMax">
								       <span>k</span>
							       </div>
                                </c:if>
							    <c:if test="${po.getMonthlyMin() == null  || po.getMonthlyMax() == null}">
                                   <div>
								       <input type="text" placeholder="最低月薪" value="0" id="salaryMin" name="monthlyMin">
								       <span>k</span>
							       </div>
							       <div>
								       <input type="text" placeholder="最高月薪" value="0" id="salaryMax" name="monthlyMax">
								       <span>k</span>
							       </div>
                                </c:if>   
							       <span>只能输入整数，如：9</span>
						      </div>
					          </td>
				              </tr>
				              <tr>
					          <td><span class="redstar">*</span></td>
					          <td>工作城市</td>
					          <td>
						         <input type="text" placeholder="请输入工作城市，如：北京" value="${po.getPcity()}" name="pcity" id="workAddress">
					          </td>
				              </tr>
			          </tbody>
		      </table>
<!--=第三组输入开始================================================ --> 
		<table class="btm">
			<tbody>
				<tr>
					<td width="25"><span class="redstar">*</span></td>
					<td width="85">工作经验</td>
					<td>
			               <div class="nice-select" name="nice-select">
			                  <c:if test="${po.getPyears() != null}">
                                <input value="${po.getPyears()}" readonly="readonly" type="text" style="width: 320px;height: 45px;" name="pyears">
                              </c:if>
			                  <c:if test="${po.getPyears() == null}">
                                <input value="请选择工作经验" readonly="readonly" type="text" style="width: 320px;height: 45px;" name="pyears">
                              </c:if>
			                  <ul style="display: none;">
				                 <li style="width: 336px;height: 45px;">不限</li>
				                 <li style="width: 336px;height: 45px;">应届毕业生</li>
				                 <li style="width: 336px;height: 45px;">1年以下</li>
				                 <li style="width: 336px;height: 45px;">1-3年</li>
				                 <li style="width: 336px;height: 45px;">3-5年</li>
				                 <li style="width: 336px;height: 45px;">5-10年</li>
				                 <li style="width: 336px;height: 45px;">10年以上</li>
			                 </ul>
		               </div>
					</td>
				</tr>
				<tr>
					<td><span class="redstar">*</span></td>
					<td>学历要求</td>
					<!--<h3><span>(最高月薪不能大于最低月薪的2倍)</span></h3> -->
					<td>
						<div class="nice-select" name="nice-select">
						   <c:if test="${po.getQualifications() != null}">
                                <input value="${po.getQualifications()}" readonly="readonly" type="text" style="width: 320px;height: 45px;" name="qualifications">
                           </c:if>
			               <c:if test="${po.getQualifications() == null}">
                                <input value="请选择学历要求" readonly="readonly" type="text" style="width: 320px;height: 45px;" name="qualifications">
                           </c:if>
			                  <ul style="display: none;">
				                 <li style="width: 336px;height: 45px;">不限</li>
				                 <li style="width: 336px;height: 45px;">大专</li>
				                 <li style="width: 336px;height: 45px;">本科</li>
				                 <li style="width: 336px;height: 45px;">硕士</li>
				                 <li style="width: 336px;height: 45px;">博士</li>
				                 <li style="width: 336px;height: 45px;">教授</li>
				                 <li style="width: 336px;height: 45px;">院士</li>
			                 </ul>
		               </div>
					</td>
				</tr>
			</tbody>
		</table>
<!--=第四组输入开始================================================ -->
		<table class="btm">
			<tbody>
				<tr>
					<td width="25"><span class="redstar">*</span></td>
					<td width="85">职位诱惑</td>
					<td>
						<input type="text" placeholder="20字描述该职位的吸引力，如：福利待遇、发展前景等" value="${po.getTreatment()}" name="treatment" class="input_520" id="positionAdvantage">
					</td>
				</tr>
				<tr>
					<td><span class="redstar">*</span></td>
					<td>职位描述</td>
					<td>
						<span class="c9 f14">(建议分条描述工作职责等。请勿输入公司邮箱、联系电话及其他外链，否则将自动删除)</span>
                        <div id="div1"></div>
		                    <input type="hidden" id="nbody" name="nbody" />
		                    <script type="text/javascript">
		                      const E = window.wangEditor
		                      const editor =new E("#div1")
		                      editor.create()
		                    </script>
					</td>
				</tr>
				<tr>
					<td><span class="redstar">*</span></td>
					<td>工作地址</td>
					<td>
						<input type="text" placeholder="请输入详细的工作地址" value="${po.getPaddress()}" name="paddress" class="input_520" id="positionAddress">
						
						<div class="work_place f14">我们将在职位详情页以地图方式精准呈现给用户
							<a id="mapPreview" href="javascript:;" onclick="loadJScript()">预览地图</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
<!--================================================= --> 
		<table>
			<tbody>
				<tr>
					<td width="25"></td>
					<td colspan="2">
						 接收简历邮箱：
						<input type="text" value="" name="pmailbox">
						<input type="hidden" value="${cid}" name="cid">
						<!-- <span class="error" id="beError" style="display:none"></span> -->
					</td>
				</tr>
				<tr>
					<td width="25"></td>
					<td colspan="2">
						<input type="submit" value="发布" id="jobPreview" class="btn_32"  onclick="tijiao()"/>
					</td>
				</tr>
			</tbody>
		</table>
<!--================================================= --> 		
		</form>
		</dd>
		</dl>
		</div>
		<!--结束  右边栏-->	
	<script type="text/javascript" src="style/js/jquery.js"></script>
	<script>
		$('[name="nice-select"]').click(function(e){
		    $('[name="nice-select"]').find('ul').hide();
		    $(this).find('ul').show();
			e.stopPropagation();
		});
		$('[name="nice-select"] li').hover(function(e){
			$(this).toggleClass('on');
			e.stopPropagation();
		});
		$('[name="nice-select"] li').click(function(e){
			var val = $(this).text();
			$(this).parents('[name="nice-select"]').find('input').val(val);
			$('[name="nice-select"] ul').hide();
			e.stopPropagation();
		});
		$(document).click(function(){
			$('[name="nice-select"] ul').hide();
		});
	</script>	